<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html itemscope itemtype="http://schema.org/Product" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="description" content="Frequently Asked Questions about the JMO Unity Assets.">
		
		<title>JMO Assets - Toony Colors Pro 2  - Documentation</title>
		<link rel="stylesheet" type="text/css" href="Documentation Data/TCP2_Documentation.css" />
		<link rel="stylesheet" type="text/css" href="Documentation Data/TCP2_Atlas.css" />
	</head>
	<body>
	<div class="main">
	
		<div class="otherassets">Other JMO assets for Unity:</div>
		<table class="amenu bottom" cellspacing="0" cellpadding="0" border="0">
		  <tr>
			<td><a href="http://www.jeanmoreno.com/cartoonfx/">Cartoon FX 1</a></td>
			<td><a href="http://www.jeanmoreno.com/cartoonfx2/">Cartoon FX 2</a></td>
			<td><a href="http://www.jeanmoreno.com/cartoonfx3/">Cartoon FX 3</a></td>
			<td><a href="http://www.jeanmoreno.com/cartoonfx4/">Cartoon FX 4</a></td>
			<td><a href="http://www.jeanmoreno.com/warfx/">War FX</a></td>
			<td style="border-right:none;"><a href="http://www.jeanmoreno.com/matcap/">MatCap Shaders <span class="free">(Free)</span></a></td>
		  </tr>
		</table>
		
<!-- ################################################################################################################################ -->
		<!-- HEADER -->
		<div id="top" class="title">
		<h1>Toony Colors Pro+Mobile 2</h1>
		<h2>Documentation</h2>
		</div>
		<div class="footer">v2.11.2 - 13 august 2015<br />© 2014-2015 - <a href="http://www.jeanmoreno.com/" target="_blank">Jean Moreno (JMO)</a></div>
		
		<div class="toplink"><a href="#top">back to top</a></div>
		
		<!-- THANKS! -->
		<div class="box"><p>Thank you for your interest in <strong>Toony Colors Pro+Mobile 2</strong>!<br />This document will explain and provide examples for each feature of Toony Colors Pro 2.<br /><br />
		Note that topics of this documentation can be accessed directly from Unity by clicking on the <span class="icon icon_help">&nbsp;</span> icons.</p></div>
		
		<br />
		
		<!-- INDEX -->
<div class="index">
	<div class="left">
		<ul>
			<li><h5>General</h5>
			<li><a href="#about">About</a></li>
			<li><a href="#getting_started">Getting Started</a></li>
			<li><a href="#unified_shader">Unified Material Inspector</a></li>
			<li><a href="#shader_generator">Shader Generator</a></li>
			<li><a href="#masks">Shader Generator : Masks</a></li>
			<li><a href="#smoothed_normals_utility">Smoothed Normals Utility</a>
			<li><a href="#unpack_shaders">Unpack Shaders</a>
			<li><a href="#help">Further Help</a>
		</ul>
	</div>
	<div class="mid">
		<ul>
			<li><h5>Unified Material Features</h5></li>
			<li><a href="#base_properties">Base Properties</a></li>
			<li><a href="#ramp_style">Ramp Style</a></li>
			<li><a href="#normal_bump_map">Normal/Bump Map</a></li>
			<li><a href="#specular">Specular</a></li>
			<li><a href="#reflection">Reflection (Desktop)</a></li>
			<li><a href="#matcap">MatCap (Mobile)</a></li>
			<li><a href="#rim">Rim Effects</a></li>
			<li><a href="#outline">Outline</a></li>
			<li><a href="#lightmap">Lightmap</a></li>
		</ul>
	</div>
	<div class="right">
		<ul>
			<li><h5>Shader Generator Features</h5></li>
			<li><a href="#textured_threshold">Textured Threshold</a></li>
			<li><a href="#detail_texture">Detail Texture</a></li>
			<li><a href="#vertex_colors">Vertex Colors</a></li>
			<li><a href="#vertex_texture_blending">Vertex Texture Blending</a></li>
			<li><a href="#self-illumination_map">Self-Illumination</a></li>
			<li><a href="#normal_bump_map_sg">Normal/Bump Map (Shader Generator)</a></li>
			<li><a href="#independent_shadows">Independent Shadows</a></li>
			<li><a href="#specular_sg">Specular (Shader Generator)</a></li>
			<li><a href="#reflection_sg">Reflection (Shader Generator)</a></li>
			<li><a href="#cubemap_ambient">Cubemap Ambient</a></li>
			<li><a href="#directional_ambient">Directional Ambient</a></li>
			<li><a href="#rim_sg">Rim Effects (Shader Generator)</a></li>
			<li><a href="#matcap_sg">MatCap (Shader Generator)</a></li>
			<li><a href="#sketch">Sketch Overlay</a></li>
			<li><a href="#alpha_blending">(Alpha) Blending</a></li>
			<li><a href="#alpha_testing_(cutout)">Alpha Testing</a></li>
		</ul>
	</div>
</div>
		
<!-- ################################################################################################################################ -->
	<div id="about" class="header">About</div>
	<div class="box">
		<p><strong>Toony Colors Pro 2</strong> (abbreviated <strong>TCP2</strong>) is a set of shaders and scripts used to help you give a <strong>stylized look</strong> to your Unity game or application.<br />
		It comes with two main features:</p>
		<ul>
		<li>a set of shaders with a <a href="#unified_shader">Unified Material Inspector</a>: you only select the base Shader in Unity and TCP2 handles selecting the correct one depending on the options you toggle</li>
		<li>the <a href="#shader_generator">Shader Generator</a> allowing you to generate your own Unity shader, with even more features available than in the unified shader</li>
		</ul>
		<p>Here are some examples on a basic sphere:</p>
		<div class="center">
			<div class="img SphDiffuse"><span>Unity Diffuse Shader</span></div>
			<div class="img SphTCP2"><span>Toony Colors Pro 2</span></div>
			<div class="img SphTCP2_HardLine"><span>TCP2 with no Ramp Smoothing</span></div>
			<div class="img SphTCP2_Ramp"><span>TCP2 with Texture Ramp</span></div>
			<div class="img SphTCP2_SketchOutline"><span>Sketch Overlay and Outline</span></div>
			<div class="img SphTCP2_TexturedRamp"><span>Texture Ramp and Textured Threshold</span></div>
			<div class="img SphTCP2_DetailHalftone"><span>Detail texture and Halftone Sketch</span></div>
			<div class="img SphTCP2_RimRefl"><span>Rim Reflection and black Outline</span></div>
			<div class="img SphTCP2_BumpRim"><span>Bump, Rim, Outline and Colored Shadows</span></div>
		</div>
	</div>
		
<!-- ################################################################################################################################ -->
	<div id="getting_started" class="header">Getting Started</div>
	<div class="box">
		<p>Assign one of the Unified Shader to your material(s), <strong>Toony Colors Pro 2 > Desktop</strong> or <strong>Toony Colors Pro 2 > Mobile</strong> depending on the device you target.<br />
		You can then select the options you want for your material (bump, specular, rim lighting, outlines...) and it will automatically choose the correct shader, making sure you don't have any unused feature loaded.<br/>
		<br />Internally the shader selection works in two steps:<br />
		- it chooses the correct <strong>high-level .shader file</strong> depending on the selected features (outlines for example)<br />
		- Unity then loads an <strong>internal shader variation</strong> based on the settings choosed, just as it regularly does to turn lightmaps on or off for example (using multi_compile directive)</p>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		Each .shader file has up to 928 internal variations, which is why the compilation may take a little longer for some of the shaders!<br/>The compilation only happens once when first importing the pack.
		</div></td></table></div>
		<div class="warning"><table><td><div class="icon icon_warning"></div></td><td><div>
		If you are using <b>Unity 4.3 or older</b>, the compilation may be excessively long because of this high variation number.<br /><a class="external" target="_blank" href="http://blogs.unity3d.com/2014/05/06/shader-compilation-in-unity-4-5/">See why here (Unity Blog)</a>.
		</div></td></table></div>
		<div class="warning"><table><td><div class="icon icon_warning"></div></td><td><div>
		At <b>Build Time</b>, the compilation can take a lot of time depending on how many shaders are used. This is because Unity will fully compile each variation in each shader file.<br />
		These compiled shaders are then <b>cached</b>, so <b>this will only happen during the first build</b> of your application, as long as you don't modify the shaders afterwards.
		</div></td></table></div>
	</div>
		
<!-- ################################################################################################################################ -->
	<div class="header" id="unified_shader">Unified Material Inspector / Unified Shader</div>
	<div class="box">
		<p>The <strong>Unified Material Inspector</strong> allows you to toggle features on and off and let Unity pick and compile the right shader for you. This will ensure that only the features you care about are included in the compiled shader, so that it runs as fast as possible.<br /><br />
		There are two versions of the Unified Shader included with Toony Colors Pro 2:</p>
		<ul>
		<li><strong>Toony Colors Pro 2 > Desktop</strong> with all features in their high quality version</li>
		<li><strong>Toony Colors Pro 2 > Mobile</strong> with all features optimized to be as fast as possible</li>
		</ul>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		Note that the desktop version can work smoothly on some high-end mobile devices, so it can make sense to use it for mobile on your main character for example.
		</div></td></table></div>
		
		<div class="center">
			<div class="img Inspector"><span>Toony Colors Pro 2<br />Unified Material Inspector</span></div>
		</div>
		
		<h3>FEATURES</h3>
		
		<!-- BASE PROPERTIES -->
		<div id="base_properties" class="section">
			<h4>Base Properties</h4>
			<p>There are 3 colors in the base properties:</p>
			<ul>
			<li><strong>Color</strong> is the regular tint Color multiplied with the whole model</li>
			<li><strong>Highlight Color</strong> is the a tint Color only applied to the lit parts of the model</li>
			<li><strong>Shadow Color</strong> is the a tint Color only applied to the unlit parts of the model</li>
			</ul>
			<p>Examples:</p>
			<div class="img US1_Color_A"><span>Default Colors</span></div>
			<div class="img US1_Color_B"><span>Green Color</span></div>
			<div class="img US1_Color_C"><span>Green Highlight Color</span></div>
			<div class="img US1_Color_D"><span>Green Shadow Color</span></div>
			<p>The <strong>Base</strong> texture is the main one. Its alpha channel can be used as a gloss map when Specular is enabled.</p>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- RAMP STYLE -->
		<div id="ramp_style" class="section">
			<h4>Ramp Style</h4>
			<p>The <strong>slider ramp</strong> style allows you to define the <strong>lit/unlit threshold</strong> value, as well as its <strong>smoothness</strong> (hard or soft line separating shadows from highlights).</p>
			<p>The <strong>texture ramp</strong> style allows you to use a 1D texture (horizontal texture with 1 pixel height) defining the shading from lit to unlit.</p>
			<p>Slider Ramp Examples:</p>
			<div class="img US2_Ramp_p5p1"><span>Threshold = 0.5<br />Smoothness = 0.2</span></div>
			<div class="img US2_Ramp_p3p5"><span>Threshold = 0.3<br />Smoothness = 0.5</span></div>
			<div class="img US2_Ramp_p75p01"><span>Threshold = 0.75<br />Smoothness = 0.01</span></div>
			<p>Texture Ramp Examples:</p>
			<div class="img US2_Ramp_t1"><span>Unity toon ramp</span></div>
			<div class="img US2_Ramp_t2"><span>Old school ramp using point filtering mode</span></div>
			<div class="img US2_Ramp_t3"><span>Backlit ramp</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- BUMP MAPS -->
		<div id="normal_bump_map" class="section">
			<h4>Normal/Bump Map</h4>
			<p>Enables normal map support.</p>
			<div class="img US3_Bump"><span>Stars normal map<br />Ramp Smoothing = 0.1</span></div>
			<div class="img US3_Bump_2"><span>Granular normal map<br />Ramp Smoothing = 0.4</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- SPECULAR -->
		<div id="specular" class="section">
			<h4>Specular</h4>
			<p>Enables Blinn-Phong specular.</p>
			<ul>
				<li><strong>Regular</strong>: default specular as it works in Unity 4</li>
				<li><strong>Cartoon</strong>: allows you to define the smoothness of the specular highlight</li>
			</ul>
			<div class="img US4_Spec_s1"><span>Regular Specular<br />Shininess = 0.1</span></div>
			<div class="img US4_Spec_s1s1"><span>Cartoon Specular<br />Smoothness = 0.1</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- REFLECTION -->
		<div id="reflection" class="section">
			<h4>Reflection (Desktop)</h4>
			<p>Enables cubemap-based reflections.</p>
			<ul>
				<li><strong>Global</strong>: applies the reflection on the whole model</li>
				<li><strong>Masked</strong>: uses the main texture's alpha channel to mask parts of the reflection</li>
				<li><strong>Reflection Color (RGB)</strong>: tint color applied to the reflection</li>
				<li><strong>Reflection Color (Alpha)</strong>: defines the reflection intensity</li>
				<li><strong>Use Reflection Probes</strong>: will take reflection data from Reflection Probes <strong>(Unity 5 only)</strong></li>
			</ul>
			<div class="img US5_Refl"><span>Global Reflection</span></div>
			<div class="img US5_Refl_2"><span>Masked Reflection</span></div>
		</div>

		<div class="separator">&nbsp;</div>
		
		<!-- MATCAP -->
		<div id="matcap" class="section">
			<h4>MatCap (Mobile)</h4>
			<p>Enables texture-based fixed reflections, using a simple square texture. See my free <a href="http://www.jeanmoreno.com/matcap/" target="_blank" class="external">MatCap Shader Pack</a> for more examples!</p>
			<ul>
				<li><strong>Global</strong>: applies the reflection on the whole model</li>
				<li><strong>Masked</strong>: uses the main texture's alpha channel to mask parts of the reflection</li>
				<li><strong>Reflection Color (RGB)</strong>: tint color applied to the reflection</li>
				<li><strong>Reflection Color (Alpha)</strong>: defines the reflection intensity</li>
			</ul>
			<div class="img US5b_MatCap"><span>Additive MatCap</span></div>
			<div class="img US5b_MatCapTex"><span>MatCap texture used</span></div>
			<div class="img US5b_MatCap_2"><span>Multiplicative MatCap</span></div>
			<div class="img US5b_MatCapTex_2"><span>MatCap texture used</span></div>
		</div>

		<div class="separator">&nbsp;</div>
		
		<!-- RIM -->
		<div id="rim" class="section">
			<h4>Rim Effects</h4>
			<p>Enables rim effects, where intensity depends on the view direction and the face normal.</p>
			<ul>
				<li><strong>Lighting</strong>: adds a color based on the rim factor (a.k.a. <strong>rim lighting</strong>)</li>
				<li><strong>Outline</strong>: multiplies a color based on the rim factor</li>
				<li><strong>Rim Color (RGB)</strong>: defines the rim color</li>
				<li><strong>Rim Color (Alpha)</strong>: defines the rim intensity</li>
				<li><strong>Rim Min/Max</strong>: define the thresholds based on the rim value</li>
				<li><strong>Directional Rim (XY)</strong>: allows control of the rim direction (e.g. only coming from top)</li>
			</ul>
			<div class="img US6_Rim"><span>Red rim lighting<br />Min = 0.3, Max = 1</span></div>
			<div class="img US6_Rim_2"><span>Red rim lighting<br />Min = 0.6, Max = 0</span></div>
			<div class="img US6_Rim_5"><span>Directional rim lighting<br />Direction Y = 0.5</span></div>
			<div class="img US6_Rim_3"><span>Black rim outline<br />Min = 0.2, Max = 0.8</span></div>
			<div class="img US6_Rim_4"><span>Red rim outline<br />Min = 0.5, Max = 0.55</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- OUTLINE -->
		<div id="outline" class="section">
			<h4>Outline</h4>
			<p>Adds a mesh-based outline to the model. Note that this will <strong>add 1 draw call</strong>.<br /><br />
			The outline works as follow:<br />
			- an extruded version of the mesh (based on its normals) is rendered with a full unlit color, and with its faces flipped<br />
			- the regular model is rendered on top of it, creating the illusion of outlines
			</p>
			<div class="warning"><table><td><div class="icon icon_warning"></div></td><td><div>
			The outline may show incorrectly for meshes with hard edges. In this case you can use TCP2's <a href="#smoothed_normals_utility">Smoothed Normals Utility</a> to correct the artefacts.
			</div></td></table></div>
			<div class="center">
			<div class="img SNormalsCube_1"><span>Regular hard edge normals</span></div>
			<div class="img SNormalsCube_2"><span>Smoothed normals stored in UV2<br />(hard edge shading is preserved)</span></div>
			</div>
			<ul>
				<li><strong>Opaque</strong>: solid color outlines</li>
				<li><strong>Blended</strong>: allows you to set a blending mode to the outlines, to make them <strong>transparent</strong> for example</li>
			</ul>
			<ul>
				<li><strong>Outline Color</strong>: alpha can control opacity depending on the blending mode selected with <strong>Blended Outlines</strong></li>
				<li><strong>Outline Width</strong>: defines how much to extrude the mesh from the vertex normals to draw the outline</li>
				<li><strong>Outline Color From Texture</strong> (<b>Desktop only</b>): takes the outline color from the main texture (averaged and multiplied with the outline color)
				<ul><li><strong>Texture Outline LOD</strong>: defines the mip map level from which to sample the texture color (higher = more blurring)</li></ul>
				</li>
				<li><strong>Constant Size Outline</strong>: outline size will stay the same relatively to the screen</li>  
				<li><strong>Correct Z Artefacts</strong>: allows you to tweak the outline extrusion to correct artefacts from complex models</li>  
				<h5>Outline Normals</h5>
			</ul>
			<ul>
				<li><strong>Regular</strong>: use the regular vertex normals</li>  
				<li><strong>Vertex Colors</strong>: use the vertex colors as normals</li>  
				<li><strong>Tangents</strong>: use the vertex tangents as normals (will prevent bump maps and anisotropic specular from working)</li>  
				<li><strong>UV2</strong>: use the vertex second texture coordinates as normals</li>  
			</ul>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		Change this setting when you use TCP2's <a href="#smoothed_normals_utility">Smoothed Normals Utility</a> to correct hard-edged models.
		</div></td></table></div>
			<ul>
				<h5>Outline Blending</h5>
				<li><strong>Source Factor</strong>: hardware blending source factor</li>  
				<li><strong>Destination Factor</strong>: hardware blending destination factor</li>
			</ul>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		Blending modes examples:<br />
		<b>SrcAlpha / OneMinusSrcAlpha</b>: alpha transparency<br />
		<b>DstColor / Zero</b>: multiplicative<br />
		<b>One / One</b>: additive<br />
		<b>OneMinusDstColor / One</b>: soft additive
		</div></td></table></div>
			<div class="img US7_Outline_1"><span>Black opaque outlines<br />Width = 1.5</span></div>
			<div class="img US7_Outline_2"><span>Outline color from texture</span></div>
			<div class="img US7_Outline_3"><span>Additive blended outline</span></div>
		
		<h5>Shader Generator options</h5>
		<ul>
			<li><strong>Outline behind model</strong>: will make the outline appear behind the model (sorting may not work correctly with other objects)</li>
		</ul>
		</div>
		
		<!-- LIGHTMAP -->
		<div id="lightmap" class="section">
			<h4>Lightmap</h4>
			<p>Enables TCP2's lightmap decoding.<br />
			Lightmaps will be affected by the <a href="#base_properties">Highlight and Shadow</a> color properties, as well as the <a href="#ramp_style">Ramp</a> properties.<br />
			The shader will take the luminance of the lightmap and the ramp settings to determine which areas are dark or bright, and will then apply colors accordingly.</p>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		Color values are doubled, so setting a mid-gray value (RGB 128,128,128) for both Highlight and Shadow colors will give the same result as Unity's lightmaps
		</div></td></table></div>
			<div class="img US8_LightmapUnity"><span>Default Unity lightmap</div>
			<div class="img US8_LightmapTCP2"><span>TCP2 lightmap with reinforced blue shadows</span></div>
		</div>
		
	</div>
		
<!-- ################################################################################################################################ -->
		<div class="header" id="shader_generator">Shader Generator</div>
		<div class="box">
		<p>The <strong>Shader Generator</strong> allows you to generate your own shader files with even more features than in the <a href="#unified_shader">Unified Material Inspector</a>. Indeed each on/off feature in the Unified Shader doubles the number of internal variants, which quickly adds up to lots of internal shader programs. Moreover, Unity's multi_compile directive has its limits (at least in Unity 4.5 and older).</p>
		<p>Thus generating your own shader files with no variants and exactly the features you need allows for <strong>faster compilation and iteration</strong>.</p>
		
		<!-- USAGE -->
		<h3>USAGE</h3>
		<ul>
			<li>Open the Shader Generator via the menu: <strong>Tools > Toony Colors Pro 2 > Shader Generator</strong></li>
			<li>Select a previously generated shader you want to modify, or New Shader if you want to create one</li>
			<li>(New Shader) Choose the name of your shader. The forward slashes will indicate the folders in Unity's shaders drop-down list.</li>
			<li>(Optional) Choose the shader filename if the 'Automatic Names' option is disabled</li>
			<li>Select the features you want on the shader</li>
			<li>Click on 'Generate Shader' (or 'Update Shader' if you are modifying an existing one)</li>
		</ul>
		<p>There are a lot of additional features available, however if you select <strong>too many</strong> at the same times the shader might not be able to compile. This is generally due to the limitations of vertex interpolators in Shader Model 3.</p>
		
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		You can open a generated shader for modification directly in the Shader Generator by <b>clicking on the <span class="icon icon_cog">&nbsp;</span> icon</b> in the Material Inspector!
		</div></td></table></div>
		
		<div class="warning"><table><td><div class="icon icon_warning"></div></td><td><div>
		The Shader Generator relies on the <b>ShaderImporter.userData</b> string to store information about the features so that they show correctly in the Inspector. Be careful if you also use it in your scripts.
		</div></td></table></div>
		
		<h3>ADDITIONAL FEATURES (only available with the Shader Generator)</h3>
		
		<!-- TEXTURED THRESHOLD -->
		<div id="textured_threshold" class="section">
			<h4>Textured Threshold</h4>
			<p>This is a powerful feature to achieve a <strong>hand-painted look</strong> directly on the shading.</p>
			<p>The regular shading is defined on a continuous line, more or less smooth depending on the Ramp Smoothing (or Ramp Texture if using one).<br /><strong>Textured Threshold</strong> allows you to add a <strong>texture pattern along this line</strong>.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Threshold Texture (Alpha)</strong>: offset the lit/unlit threshold based on the alpha channel</li>
			</ul>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		Only the Alpha channel is used: values > 128 will add to the threshold, values < 128 will subtract from it (a value of 128 has no effect)
		</div></td></table></div>
			<p>Examples:</p>
			<div class="img SG1_TexThr_1"><span>Using a texture ramp (no threshold texture)</span></div>
			<div class="img SG1_TexThr_2"><span>Achieving a hand-painted look</span></div>
			<div class="img SG1_TexThr_2tex"><span>Texture used for the hand-painted look</span></div>
			<div class="img SG1_TexThr_3"><span>Using a noise-based threshold texture</span></div>
			<div class="img SG1_TexThr_3tex"><span>Noise texture used for the previous look</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- DETAIL TEX -->
		<div id="detail_texture" class="section">
			<h4>Detail Texture</h4>
			<p>Adds another texture on top of the main one, with its own tiling and offset values.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Detail (RGB)</strong>: the detail texture</li>
			</ul>
			<h5>Options (Shader Generator)</h5>
			<ul class="options">
				<li><strong>Use UV2 coordinates</strong>: use second UV coordinates for the detail texture</li>
			</ul>
			<p>Example:</p>
			<div class="img SG2_DetailTex"><span>Rock detail texture over main checker texture</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- COLOR MASK -->
		<div id="color_mask" class="section">
			<h4>Color Mask</h4>
			<p>Enables main color <a href="#masks">masking</a>. Can be useful if you want to create a customizable color based on the main texture's alpha channel, for example.</p>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- VERTEX COLORS -->
		<div id="vertex_colors" class="section">
			<h4>Vertex Colors</h4>
			<p>Tints the whole model according to its <strong>vertex colors</strong>.<br />Can be used to simulate ambiant occlusion, vertex-based lightmap, or regular tinting to add color variations on the same texture while keeping <strong>dynamic batching</strong>.</p>
			<p>Example:</p>
			<div class="img SG3_VColors"><span>Simple vertex-based color tinting</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- VERTEX BLENDING -->
		<div id="vertex_texture_blending" class="section">
			<h4>Vertex Texture Blending</h4>
			<p>Blends two textures based on the vertex colors alpha value. 0 = first texture, 1 = second texture, values in-between = blend between the two.</p>
			<p>Example:</p>
			<div class="img SG4_VColBlend"><span>Blend between two textures</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- SELF-ILLUMINATION -->
		<div id="self-illumination_map" class="section">
			<h4>Self-Illumination Map</h4>
			<p>Self-lights the model based on a <a href="#masks">mask</a> texture.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Illumination Color</strong>: tint color for the illumination light (RGB) and illumination strength (Alpha)</li>
			</ul>
			<h5>Options (Shader Generator)</h5>
			<ul class="options">
				<li><strong>Self-Illumination Color</strong>: enables the Illumination Color property</li>
			</ul>
			<p>Example:</p>
			<div class="img SG5_SelfIllumin"><span>Simple self-illumination</span></div>
			<div class="img SG5_SelfIllumin2"><span>Color tinted self-illumination</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- BUMP MAPS -->
		<div id="normal_bump_map_sg" class="section">
			<h4>Normal/Bump Map (Shader Generator)</h4>
			<p>Enables normal map support.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Normal Map (RGB)</strong>: normal map texture</li>
				<li><strong>Heightmap (Alpha)</strong>: heightmap controlling the parallax effect (alpha channel only, can be the same texture defined in the normal map)</li>
				<li><strong>Height</strong>: strength of the height parallax effect</li>
			</ul>
			<h5>Options (Shader Generator)</h5>
			<ul class="options">
				<li><strong>Parallax/Height Map</strong>: enables the Parallax/Height map support</li>
			</ul>
			<div class="img US3_Bump"><span>Stars normal map<br />Ramp Smoothing = 0.1</span></div>
			<div class="img US3_Bump_2"><span>Granular normal map<br />Ramp Smoothing = 0.4</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- INDEPENDENT SHADOWS -->
		<div id="independent_shadows" class="section">
			<h4>Independent Shadows</h4>
			<p>Prevents dynamic shadows (the ones that appear when you enable Hard or Soft Shadows in your light settings) from being merged with shadows from direct lighting.</p>
			<p>In the example below, a cube is projecting its shadow on the sphere:</p>
			<div class="img SG6_IndShadows"><span>Default: dynamic shadow merged with lighting</span></div>
			<div class="img SG6_IndShadows_2"><span>Independant shadow: dynamic shadows are separate</span></div>
		</div>
		<div class="separator">&nbsp;</div>
		
		<!-- SPECULAR -->
		<div id="specular_sg" class="section">
			<h4>Specular (Shader Generator)</h4>
			<p>Enables specular highlights.</p>
			<h5>Options (Shader Generator)</h5>
			<ul>
				<li><strong>Regular</strong>: default Blinn-Phong specular as it works in Unity 4</li>
				<li><strong>Anisotropic</strong>: Ward anisotropic specular</li>
				<li><strong>Specular Mask</strong>: uses a <a href="#masks">mask</a> for specular (aka gloss map)</li>
				<li><strong>Shininess Mask</strong>: uses a <a href="#masks">mask</a> for shininess (allows variable shininess on the same material)</li>
				<li><strong>Cartoon Specular</strong>: allows you to define the smoothness of the specular highlight</li>
			</ul>
			<div class="img US4_Spec_s1"><span>Regular Specular<br />Shininess = 0.1</span></div>
			<div class="img US4_Spec_s1s1"><span>Cartoon Specular<br />Smoothness = 0.1</span></div>
			<div class="img SG6b_Spec"><span>Anisotropic Specular<br />Aniso. Spread = 0.65</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- REFLECTION -->
		<div id="reflection_sg" class="section">
			<h4>Reflection (Shader Generator)</h4>
			<p>Enables cubemap-based reflections.</p>
			<h5>Options (Shader Generator)</h5>
			<ul>
				<li><strong>Reflection Mask</strong>: uses a <a href="#masks">mask</a> for reflection</li>
				<li><strong>Reflection Color</strong>: tints the reflection color (RGB) and sets its strength (Alpha)</li>
				<li><strong>Reflection Roughness</strong>: defines the MipMap level at which to sample the texture, to simulate blurry reflections</li>
				<li><strong>Rim Reflection/Fresnel</strong>: the reflection will only appear according to the rim settings (i.e. at grazing angles on the model)</li>
			</ul>
		<div class="warning"><table><td><div class="icon icon_warning"></div></td><td><div>
		MipMaps need to be enabled on the Cubemap texture for Roughness to work!
		</div></td></table></div>
		<br />
			<div class="img US5_Refl"><span>Global Reflection</span></div>
			<div class="img US5_Refl_2"><span>Masked Reflection</span></div>
			<div class="img SG7_Refl"><span>Blurry Reflection<br />Roughness = 6</span></div>
			<div class="img SG7_Refl_2"><span>Rim/Fresnel Reflection</span></div>
		</div>

		<div class="separator">&nbsp;</div>
		
	<div id="custom_ambient" class="section"> <!-- Custom Ambient -->
		
		<!-- CUBEMAP AMBIENT -->
		<div id="cubemap_ambient" class="section">
			<h4>Cubemap Ambient</h4>
			<p>Enables cubemap-based ambient lighting. Think of it as directional ambient colors (for example, ambient light from the top will be blue like the sky, ambient light coming from the bottom will be brown like the ground).<br />
			The effect is very subtle but really helps to anchor your dynamic objects in your scene.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Ambient Cubemap</strong>: the cubemap from which to sample colors</li>
			</ul>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		It is recommended to use a blurred version of the skybox cubemap as your Ambient Cubemap!
		</div></td></table></div>
		<br />
			<div class="img US1_Color_A"><span>Default</span></div>
			<div class="img SG8_Amb"><span>Cubemap Ambient</span></div>
		</div>

		<div class="separator">&nbsp;</div>
		
		<!-- DIRECTIONAL AMBIENT -->
		<div id="directional_ambient" class="section">
			<h4>Directional Ambient</h4>
			<p>Enables directional ambient lighting, using 6 user-defined colors. This is cheaper than Cubemap Ambient and colors can be easily interpolated to simulate dynamic ambient lighting for example.<br />
			The effect can be very subtle but really helps to anchor your dynamic objects in your scene.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Right, Left, Top, Bottom, Front, Back</strong>: the 6 colors corresponding to the 6 world axis (positive and negative XYZ)</li>
			</ul>
		<br />
			<div class="img US1_Color_A"><span>Default</span></div>
			<div class="img SG12_DirAmb"><span>Directional Ambient<br />with strong colors</span></div>
		</div>
		
	</div> <!-- Custom Ambient -->

		<div class="separator">&nbsp;</div>
		
		<!-- RIM -->
		<div id="rim_sg" class="section">
			<h4>Rim Effects (Shader Generator)</h4>
			<p>Enables rim effects, where intensity depends on the view direction and the face normal.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Rim Color (RGB)</strong>: defines the rim color</li>
				<li><strong>Rim Color (Alpha)</strong>: defines the rim intensity</li>
				<li><strong>Rim Min/Max</strong>: define the thresholds based on the rim value</li>
				<li><strong>Rim Direction (XY)</strong>: allows control of the rim direction (e.g. only coming from top)</li>
			</ul>
			<h5>Options (Shader Generator)</h5>
			<ul>
				<li><strong>Rim Lighting</strong>: adds a color based on the rim factor (a.k.a. <strong>rim lighting</strong>)</li>
				<li><strong>Rim Outline</strong>: multiplies a color based on the rim factor</li>
				<li><strong>Vertex Rim</strong>: calculates the rim term per-vertex rather than per-pixel (less accurate but much faster)</li>
				<li><strong>Directional Rim</strong>: enables the Rim Direction property</li>
			</ul>
			<div class="img US6_Rim"><span>Red rim lighting<br />Min = 0.3, Max = 1</span></div>
			<div class="img US6_Rim_2"><span>Red rim lighting<br />Min = 0.6, Max = 0</span></div>
			<div class="img US6_Rim_5"><span>Directional rim lighting<br />Direction Y = 0.5</span></div>
			<div class="img US6_Rim_3"><span>Black rim outline<br />Min = 0.2, Max = 0.8</span></div>
			<div class="img US6_Rim_4"><span>Red rim outline<br />Min = 0.5, Max = 0.55</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- MATCAP -->
		<div id="matcap_sg" class="section">
			<h4>MatCap (Shader Generator)</h4>
			<p>Enables texture-based fixed reflections, using a simple square texture. See my free <a href="http://www.jeanmoreno.com/matcap/" target="_blank" class="external">MatCap Shader Pack</a> for more examples!</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>MatCap Texture (RGB)</strong>: the MatCap texture</li>
				<li><strong>MatCap Color (RGB)</strong>: tints the MatCap</li>
				<li><strong>MatCap Color (Alpha)</strong>: sets the strength of the MatCap</li>
			</ul>
			<h5>Options (Shader Generator)</h5>
			<ul>
				<li><strong>MatCap Add</strong>: MatCap will be added</li>
				<li><strong>MatCap Multiply</strong>: MatCap will be multiplied</li>
				<li><strong>MatCap Mask</strong>: uses a <a href="#masks">mask</a> for the MatCap effect</li>
				<li><strong>Pixel MatCap</strong>: compute MatCap effect per-pixel, useful if you are using <a href="#normal_bump_map_sg">normal maps</a></li>
				<li><strong>MatCap Color</strong>: enable the MatCap Color property</li>
			</ul>
			<div class="img US5b_MatCap"><span>Additive MatCap</span></div>
			<div class="img US5b_MatCapTex"><span>MatCap texture used</span></div>
			<div class="img US5b_MatCap_2"><span>Multiplicative MatCap</span></div>
			<div class="img US5b_MatCapTex_2"><span>MatCap texture used</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- SKETCH -->
		<div id="sketch" class="section">
			<h4>Sketch</h4>
			<p>Adds a screen-space overlay texture on the shadowed areas. Allows a hand-painted stroke effect for example.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Sketch (Alpha)</strong>: the overlay texture</li>
				<li><strong>Sketch Anim Speed</strong>: animation speed when enabled</li>
			</ul>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		An easy way to make an alpha texture is to set the Import Settings to '<b>Advanced</b>', enable '<b>Alpha from Grayscale</b>' and set the format to '<b>Alpha 8</b>'
		</div></td></table></div>
			<h5>Options (Shader Generator)</h5>
			<ul>
				<li><strong>Sketch Overlay</strong>: adds a screen-space overlay texture on the shadowed areas</li>
				<li><strong>Sketch Gradient</strong>: binary overlay texture based on min/max values (allows half-tone effects)</li>
				<li><strong>Sketch Blending</strong>: defines how to blend the sketch texture with the model's color</li>
				<li><strong>Animated Sketch</strong>: animates the texture coordinates</li>
				<li><strong>Vertex Coords</strong>: calculate screen-space coordinates per-vertex rather than per-pixel (less accurate but faster)</li>
				<li><strong>Scale with model</strong>: scales the overlay texture according to the model's size on screen</li>
			</ul>
			<div class="img SG9_Sketch"><span>Sketch Overlay with strokes texture</span></div>
			<div class="img SG9_Sketch_2"><span>Sketch Gradient with strokes texture</span></div>
			<div class="img SG9_Sketch_3"><span>Sketch Gradient with halftone texture</span></div>
			<div class="img SG9_Sketch_4"><span>Textured Sphere with regular Sketch Overlay</span></div>
			<div class="img SG9_Sketch_5"><span>Textured Sphere with<br />Color Burn blending</span></div>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- ALPHA -->
		<div id="alpha_blending" class="section">
			<h4>Alpha Blending</h4>
			<p>Enables blending on the model. Allows soft transparency but may cause sorting issues with other semi-transparent objects.</p>
			<p>Alpha Blending will be enabled by default, but you can change the source and destination blend factors to create other effects such as additive blending. See <a href="http://docs.unity3d.com/Manual/SL-Blend.html" target="_blank" class="external">Unity's manual</a> about blending for more information.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Source Factor</strong>: source blending factor</li>
				<li><strong>Destination Factor</strong>: destination blending factor</li>
			</ul>
			<div class="img SG10_Alpha"><span>Alpha blending over blue background</span></div>
			<p>You can define other blending modes than regular alpha-based transparency.<br />The following examples are in the form <span style='color:#ff8000;'>Source Factor / Destination Factor > Result</span></p>
			<ul>
			<li>Src Alpha / One Minus Src Alpha > Alpha Blending (regular transparency)</li>
			<li>One / One > Additive Blending</li>
			<li>One Minus Dst Color / One > Soft Additive Blending</li>
			<li>Dst Color / Zero > Multiplicative Blending</li>
			</ul>
		</div>
		
		<div class="separator">&nbsp;</div>
		
		<!-- ALPHA TESTING -->
		<div id="alpha_testing_(cutout)" class="section">
			<h4>Alpha Testing (Cutout)</h4>
			<p>Enables alpha testing on the model. Allows binary transparency with proper depth sorting.</p>
			<p>See <a href="http://docs.unity3d.com/Manual/SL-AlphaTest.html" target="_blank" class="external">Unity's manual</a> about alpha testing for more information.</p>
			<h5>Properties</h5>
			<ul>
				<li><strong>Alpha cutoff</strong>: threshold at which alpha value becomes transparent</li>
			</ul>
			<div class="img SG11_Alpha"><span>Alpha testing over blue background</span></div>
		</div>
		
		</div>
		
<!-- ################################################################################################################################ -->

		<div class="header" id="masks">Shader Generator : Masks</div>
		<div class="box">
		<p>Some features allow you to define a masking texture.<br />Usage is pretty simple:
		<ul>
		<li>Select the <strong>texture</strong> you want to use as a mask, either the main texture or a new texture slot (you have up to 3 separate masks textures)</li>
		<li>If you selected a mask, select the <strong>color channel</strong> that will be used for masking</li>
		<li>If you selected a mask, select the <strong>UV settings</strong> that will be used for masking (use the same as the Main Texture, or independent ones allowing you to define the tiling and offset settings of the mask alone)</li>
		</ul>
		</p>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		The mask UV settings are the same for each mask, so if you change it for Mask 1 anywhere it will be reflected everywhere Mask 1 is used.
		</div></td></table></div>
		<p>For example, if you want to use the main texture's alpha channel as a gloss map, in the <strong>Specular Mask</strong> feature choose <strong>Main Texture</strong> and <strong>Alpha</strong>.</p>
		</div>
		
<!-- ################################################################################################################################ -->
		<div class="header" id="smoothed_normals_utility">Smoothed Normals Utility</div>
		<div class="box">
		<p>The <strong>Smoothed Normals Utility</strong> allows you to solve this situation:</p>
		<div class="center">
		<div class="img SNormalsCube_1"><span>Regular hard edge normals</span></div>
		<div class="img SNormalsCube_2"><span>Smoothed normals stored in UV2<br />(hard edge shading is preserved)</span></div>
		</div>
		<h4>HOW IT WORKS</h4>
		<p>The outlining technique is based on the mesh normals. When a vertex has multiple normals (aka hard edge shading), it can break the outline as shown above.<br />
		The <strong>Smoothed Normals Utility</strong> will calculate the <strong>average normals</strong> for each vertex of your mesh, and assign them to an unused part of your mesh data (vertex colors, tangents, or second UV coordinates)</p>
		<p>By enabling the corresponding option in the <a href="#outline">Outline properties</a>, the shader will take this data as the new normals to draw the outline.<br />This way you get a correctly outlined mesh with hard-edge shading preserved.</p>
		
		<h4>USAGE</h4>
		<p>Open the utility via the menu: <strong>Tools > Toony Colors Pro 2 > Smoothed Normals Utility</strong></p>
		<p>In Unity, select:
		<ul>
		<li>a mesh or a model from the Project view</li>
		<li>a GameObject with a MeshFilter or SkinnedMeshRenderer attached</li>
		</ul>
		The meshes ready to be processed should appear in the Smoothed Normals Utility when it gets the focus.<br />
		Select the mesh data where you want to store the smoothed normals:
		<ul>
		<li><strong>Vertex Colors</strong>: <b>do not</b> use this if you are using vertex colors elsewhere (texture blending, tinting...)</li>
		<li><strong>Tangents</strong>: <b>do not</b> use this if you are using bump/normal maps or anisotropic specular</li>
		<li><strong>UV2</strong>: <b>do not</b> use this if you are using lightmaps or the detail texture on the second UV coordinates</li>
		</ul>
		Click on "<strong>Generate Smoothed Mesh</strong>" to generate a copy of the mesh with smoothed normals in the selected mesh data.<br />
		The new mesh will automatically be assigned if you had MeshFilters or SkinnedMeshRenderers selected.
		</p>
		<div class="warning"><table><td><div class="icon icon_warning"></div></td><td><div>
		<b>Smoothed Normals</b> will only be stored in <b>Tangents</b> for <b>skinned meshes</b>.<br />This is because normals need to be affected by bones, and in the 3 options available only tangents are affected by bones (vertex colors and UV2 data are not). Thus smoothed normals can only work stored in tangents for skinned meshes.<br />This means that smoothed normals can't work with normal/bump maps or anisotropic specular on skinned meshes.
		</div></td></table></div>
		<div class="helpbox"><table><td><div class="icon icon_info"></div></td><td><div>
		If a copy of the mesh has already been made, it will be overwritten with the new settings defined.<br />You can recognize the generated meshes with the [TCP2 Smoothed] suffix, and they are all stored in the 'Smoothed Meshes' folder by default.
		</div></td></table></div>
		<!--
		<h4>FORMAT</h4>
		<p>Depending on the converted mesh, the format to store the normals may vary (I still haven't figured out why, if you have an idea shoot me an email!)<br />
		From my tests, the format XYZ will always work when stored in the Tangents. Vertex Colors and UV2 may need the -YZ-X format (as is the case on Unity's Kyle robot model).</p>
		-->
		</div>
		
		<div class="header" id="unpack_shaders">Unpack Shaders</div>
		<div class="box">
		<p>To avoid very long loading times when Toony Colors Pro 2 is imported in Unity, some of its shaders are packed in an archive.<br />You can unpack these shaders by category (reflection, rim effects...) if you ever need them.<br />
		Depending on your machine, the importing process can be more or less long (for example it took me about 5 minutes to unpack all 60 shaders with an Intel Core i5 / Windows 7 / Unity 4.5).</p>
		<div class="warning"><table><td><div class="icon icon_warning"></div></td><td><div>
		If you are using <b>Unity 4.3 or older</b>, the importing process may be very long because each shader variation will be <b>compiled for each platform when imported</b>. It is highly recommended to update to Unity 4.5 if you can.<br /><a class="external" target="_blank" href="http://blogs.unity3d.com/2014/05/06/shader-compilation-in-unity-4-5/">See why here (Unity Blog)</a>.
		</div></td></table></div>
		<p>You can unpack shaders via the menu: <strong>Tools > Toony Colors Pro 2 > Unpack Shaders > ...</strong></p>
		</div>
		
		<div class="header" id="help">Further Help</div>
		<div class="box" style="text-align: left; padding-top: 12px; padding-bottom: 12px;">
		You can take a look at the <a href="http://www.jeanmoreno.com/faq/" target="_blank">FAQ page</a> for specific issues.<br />
		If you still have questions, bug reports or suggestions please contact me by email: <a href='mailto&#58;jea&#110;&#46;mor&#101;no&#46;p%7&#53;%&#54;2%6C&#105;c+%&#55;5%&#54;E&#37;69&#37;7&#52;y&#64;%&#54;7mail%2E&#37;&#54;3&#111;&#109;'>jean&#46;&#109;oreno&#46;pu&#98;lic+&#117;&#110;i&#116;&#121;&#64;gmai&#108;&#46;com</a>
		</div>
		
		<!-- OTHER ASSETS -->
		<div class="otherassets">Other JMO assets for Unity:</div>
		<table class="amenu bottom" cellspacing="0" cellpadding="0" border="0">
		  <tr>
			<td><a href="http://www.jeanmoreno.com/cartoonfx/">Cartoon FX 1</a></td>
			<td><a href="http://www.jeanmoreno.com/cartoonfx2/">Cartoon FX 2</a></td>
			<td><a href="http://www.jeanmoreno.com/cartoonfx3/">Cartoon FX 3</a></td>
			<td><a href="http://www.jeanmoreno.com/cartoonfx4/">Cartoon FX 4</a></td>
			<td><a href="http://www.jeanmoreno.com/warfx/">War FX</a></td>
			<td style="border-right:none;"><a href="http://www.jeanmoreno.com/matcap/">MatCap Shaders <span class="free">(Free)</span></a></td>
		  </tr>
		</table>
		<!-- FOOTER -->
		<div class="footer">© 2014-2015 - <a href="http://www.jeanmoreno.com/" target="_blank">Jean Moreno (JMO)</a></div>
	</div>
	</body>
</html>
